<template>
  <vue2-org-tree :data="data" :render-content="renderContent"> </vue2-org-tree>
</template>
<script>
export default {
  data() {
    return {
      data: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端",
              },
              {
                id: 6,
                label: "研发-后端",
              },
              {
                id: 9,
                label: "UI设计",
              },
              {
                id: 10,
                label: "产品经理",
              },
            ],
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部",
              },
              {
                id: 8,
                label: "销售二部",
              },
            ],
          },
          {
            id: 4,
            label: "财务部",
          },
          {
            id: 9,
            label: "HR人事",
          },
        ],
      },
      treeData: [],
    };
  },
  created() {
    this.treeData.push(this.data);
    // this.$refs.plTreeTable.reloadData(this.treeData);
  },
  mounted() {},
  methods: {
    renderContent(h, data) {
      console.log(JSON.stringify(data));
      let _this = this;
      return h(
        "el-table",
        {
          props: {
            // data: data,
            data: this.treeData,
          },
          // on: {  // table的事件
          //   'selection-change': function (val) {
          //     _this.handleSelectionChange(val)
          //   }
          // },
          style: {
            width: "100%",
          },
        },
        [
          h("el-table-column", {
            // 左侧多选，根据需求增加
            props: {
              prop: "label",
              width: "55",
              align: "center",
              label: "ID",
            },
          }),
        ]
        // <u-table >
        //   <u-table-column label="店铺" align="center" prop="id" width="110">
        //     {/* <template slot-scope="scope"> */}
        //     {this.treeData.label}
        //     {/* <div>{data[id]}</div> */}
        //     {/* </template> */}
        //   </u-table-column>
        //   <u-table-column
        //     label="销售金额"
        //     align="center"
        //     prop="label"
        //     width="110"
        //   >
        //     {data.label}
        //   </u-table-column>
        // </u-table>
      );
    },
  },
};
</script>
<!-- <style lang="scss" scoped>
@import "./tree.scss";
</style> -->
